import EmoIcon from "./Emo-Icon.vue";
import EmoIconShowTable from "./ShowTable.vue";
import type { SizeType } from "@type";

const meta = {
  title: "通用/图标组件",
  component: EmoIcon,
  // subcomponents: { EmoIconShowTable },
  tags: ["autodocs"],
  // 自定义类型配置
  // argTypes: {},
  // 默认参数
  // args: {}
};
export default meta;

// 封装渲染模板
const TemplateRender = (args: any) => ({
  components: { EmoIcon },
  setup() {
    return { args };
  },
  template: "<EmoIcon v-bind='args'/>",
});

// 基础示例
export const Default = {
  name: "默认图标",
  args: {
    name: "pensive",
  },
};
// // 渲染示例
export const Sizes = {
  name: "图标大小",
  render: () => ({
    components: { EmoIcon },
    template: `
            <div style="display: flex; gap: 20px; align-items: center;">
                <EmoIcon name="smile" size="small" />
                <EmoIcon name="smile" size="default" />
                <EmoIcon name="smile" size="large" />
            </div>
        `,
  }),
  parameters: {
    docs: {
      source: {
        type: "code",
        code: `
                    <div style="display: flex; gap: 20px; align-items: center;">
                        <EmoIcon name="smile" size="small" />
                        <EmoIcon name="smile" size="default" />
                        <EmoIcon name="smile" size="large" />
                    </div>
                `,
      },
    },
  },
};
export const ShowTable = {
  name: "图标列表",
  render: () => ({
    components: { EmoIconShowTable },
    template: `
        <div>
            <EmoIconShowTable />
        </div>
    `,
  }),
};
// // 使用封装渲染示例
// export const WrapRender = {
//     render: TemplateRender,
//     args: {
//         name: "pensive"
//     }
// };
// // 使用封装渲染示例(.bind()形式)
// export const BindRender = TemplateRender.bind({});
// BindRender.args = {};
